<template>
  <div>
    <!-- 轮播图 -->
    <div class="swiper">
    <van-swipe class="my-swipe br-15" :autoplay="3500" indicator-color="white">
      <van-swipe-item v-for="(item, index) in banner" :key="index">
        <img :src="item.pic" />
      </van-swipe-item>
    </van-swipe>
    </div>

    <!-- 歌单 -->
    <remdTl>推荐歌单</remdTl>
    <ul class="songlist" v-if="songList.length > 0">
      <ListItem v-for="sl in songList" :key="sl.id" :item="sl"></ListItem>
    </ul>
    <Loading v-if="songList.length == 0"></Loading>

    <!-- MV -->
    <remdTl>推荐MV</remdTl>
    <ul class="mvlist">
      <MvItem v-for="m in MvList" :key="m.id" :item="m"></MvItem>
    </ul>
    <Loading v-if="songList.length == 0"></Loading>

    <!-- 音乐 -->
    <remdTl>最新音乐</remdTl>
    <ul class="newsong" v-if="newSong.length > 0">
      <li v-for="s in newSong" :key="s.id">
        <SongItem :item="s" @add-list="addMusicList(newSong)"></SongItem>
      </li>
    </ul>
    <Loading v-if="newSong.length == 0"></Loading>
  </div>
</template>

<script>
import remdTl from "@/components/remdTl";
import ListItem from "@/components/ListItem";
import MvItem from "@/components/MvItem";
import SongItem from "@/components/SongItem";
import Loading from "@/components/Loading";

export default {
  name: "Recommend",
  components: {
    remdTl,
    ListItem,
    MvItem,
    SongItem,
    Loading,
  },
  data() {
    return {
      songList: [],
      MvList: [],
      newSong: [],
      banner: [],
    };
  },
  created() {
    //获取推荐歌单
    this.$http
      .get("/personalized?limit=6")
      .then((data) => {
        this.songList = data.data.result;
        // console.log("songList==>", this.songList);
      })
      .catch((err) => {
        console.log(err);
      });
    //获取推荐MV
    this.$http
      .get("/personalized/mv")
      .then((data) => {
        this.MvList = data.data.result;
        // console.log("MvList==>", this.MvList);
      })
      .catch((err) => {
        console.log(err);
      });
    //获取最新音乐
    this.$http
      .get("/personalized/newsong?limit=10")
      .then((data) => {
        this.newSong = data.data.result;
        // console.log("newSong==>", this.newSong);
      })
      .catch((err) => {
        console.log(err);
      });
    // 获取轮播图图片
    this.$http
      .get("/banner?type=2")
      .then((data) => {
        // console.log("data==>", data);
        this.banner = data.data.banners;
        // console.log("this.banner==>", this.banner);
      })
      .catch((err) => {
        console.log(err);
      });
  },
  mounted() {},
  methods: {
    addMusicList(newSong) {
      // this.$root.musicStore.musicList = this.$root.musicStore.musicList.concat(newSong);
      let newArr = this.$root.musicStore.musicList;
      newSong.map((d) => {
        let find = false;
        for (let n of newArr) {
          if (n.id == d.id) {
            find = true;
            break;
          }
        }
        if (!find) newArr.push(d);
      });
      this.$root.musicStore.musicList = newArr;
    },
  },
};
</script>

<style lang="less" scoped>
.songlist {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  li {
    width: 33%;
  }
}
.mvlist {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  li {
    width: 45%;
  }
}
.newsong {
  padding: 10px 10px;
}
.swiper{
  width: 96vw;
  margin: 15px auto;
  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 16px;
    text-align: center;
    background-color: #39a9ed;
  }
}
.br-15{
  border-radius: 15px;
}
</style>